<template>
  <div
    class="draggable-component p-2 rounded-md border border-gray-200 hover:border-primary hover:bg-primary/5 cursor-move transition-all flex flex-col items-center justify-center text-center"
    @click="handleAdd">
    <slot name="icon">
      <i style="height: 24px;height: 24px;color: black;" :class="icon">
      </i>    
    </slot>
    <span class="text-xs text-gray-700">{{ label }}</span>
  </div>
</template>

<script>


export default {
  name: 'DraggableComponent',
  props: {
    type: {
      type: String,
      required: true,
      description: '组件类型'
    },
    icon: {
      type: String,    
      description: '组件图标'
    },
    label: {
      type: String,
      required: true,
      description: '组件名称'
    }
  },
  emits: ['add'],
  setup(props, { emit }) {
    const handleAdd = () => {
      emit('add', props.type);
    };

    return {
      handleAdd
    };
  }
};
</script>

<style scoped>
.draggable-component {
  height: 80px;
  user-select: none;
}

.draggable-component:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>